<template>
  <div class="login-page">
    <el-card class="login-card">
      <h2>医院后台登录</h2>
      <el-form :model="form">
        <el-form-item label="账号">
          <el-input v-model="form.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="选择角色">
            <el-option label="院长" value="director" />
            <el-option label="员工" value="staff" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
  
  <script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

const form = ref({
  username: "",
  password: "",
  role: "",
});

const handleLogin = () => {
  const { username, password, role } = form.value;

  if (username !== "admin" || password !== "admin") {
    ElMessage.error("账号或密码错误");
    return;
  }

  if (!role) {
    ElMessage.warning("请选择角色");
    return;
  }

  // 登录成功，存储用户名和角色
  localStorage.setItem("username", "admin");
  localStorage.setItem("role", "director"); // 或 staff

  router.push("/dashboard");
};
</script>
  
  <style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-card {
  width: 400px;
  padding: 30px;
}
</style>
  